<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>新日暮里温泉馆</title>
<base th:href="${#request.getContextPath()}+'/'">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui.css" media="all">
<link rel="stylesheet" href="css/serch.css" media="all">
<script src="public/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript" src="js/transport.org.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
/*html, body, #container {
            height: 100%;
            width: 100%;
        }*/
.content-window-card {
	position: relative;
	box-shadow: none;
	bottom: 0;
	left: 0;
	width: auto;
	padding: 0;
}

.content-window-card p {
	height: 2rem;
}

.custom-info {
	border: solid 1px silver;
}

div.info-top {
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius: 5px 5px 0 0;
}

div.info-top div {
	display: inline-block;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 31px;
	padding: 0 10px;
}

div.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
}

div.info-top img:hover {
	box-shadow: 0px 0px 5px #000;
}

div.info-middle {
	font-size: 12px;
	padding: 10px 6px;
	line-height: 20px;
}

div.info-bottom {
	height: 0px;
	width: 100%;
	clear: both;
	text-align: center;
}

div.info-bottom img {
	position: relative;
	z-index: 104;
}

span {
	margin-left: 5px;
	font-size: 11px;
}

.info-middle img {
	float: left;
	margin-right: 6px;
}
</style>
  <script type="text/javascript">
	$(function(){
	      $.ajax({
	         type:"get",
	         url:"header.html",
	         async:true,
	         success:function(data){
	            $("#header").html(data);
	         }
	      });
	   });
</script>
<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
<script src="layui.js" charset="utf-8"></script>

<style>
.test {
	height: 100px;
	font-size: 70px;
	color: black;
	font-family: "biaoti";
	text-align: center;
}

.part2 {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 90%;
	margin: 0px auto;
}

.part {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 90%;
	height: 460px;
	margin: 0px auto;
}

.part1 {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 600px;
	height: 450px;
	line-height: 50px;
	float: left;
}

.layui-input-inline input {
	height: 50px;
	width: 320px;
	border-radius: 18px;
	border: solid 1px #E5E5E5;
	font-size: 20px;
	background: #FFFFFF;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	text-align: center;
	font-family: "仿宋";
}

.aaa {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	background-color: #4F4F4F;
	width: 400px;
	height: 380px;
	border: 3px solid DimGrey;
	margin: 150px auto 0px auto;
	text-align: center;
	line-height: 40px;
	color: white;
}

.l {
	height: 23px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; /* 
				-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
				-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;   */
}
/* 			.l{
				height: 23px;
				color: white;
				background-color: #A52A2A;
			}
 */
</style>

<script type="text/javascript">
$(function(){
	$("#pass1,#pass2").change(function(){
		var $passV=$("#pass1").val();
		var $pass2V=$("#pass2").val();
		if($passV != $pass2V){
				$("#lmes").html("两次密码不一致");
		}else{
			$("#lmes").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
		}
	});
});
function reg() {
	$.ajax({
		url:"user/register",
		type:"post",
		data:{
			account:$("#account").val(),
			pass:$("#pass1").val(),
			tel:$("#tel").val(),
			mname:$("#mname").val()
		},
		success:function(data){
			alert(data);
			if(data.indexOf("成功")!=-1){
				window.location.href="/user.html";
			}
		} 
	});
}
</script>
</head>
<body>
<header class="header" id="header"></header>
	<div
		style="padding: 20px; background-image: url('img/back.jpg'); background-size: 1366px; width: 100%; height: 700px;">
		<div class="aaa" id="aaa">
				<div id="part1">
					<br>
					<font size="3"><b>&nbsp;&nbsp;账&nbsp;&nbsp;户&nbsp;&nbsp;名：</b></font><input
						class="l" type="text" id="account">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
					<font size="3"><b>&nbsp;&nbsp;输入密码：</b></font><input
						class="l" type="password" id="pass1">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
						<font size="3"><b>&nbsp;&nbsp;再次输入：</b></font><input
						class="l" type="password" id="pass2">
					<span id="lmes" style="color: red;width: 100px;line-height: 20px;height: 20px;">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
					<font size="3"><b>&nbsp;&nbsp;手机号码：</b></font><input
						class="l" type="text" id="tel">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
					<font size="3"><b>&nbsp;&nbsp;真实姓名：</b></font><input
						class="l" type="text" id="mname">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
					<font size="3"><b>&nbsp;&nbsp;性别：</b>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input name="sex" type="radio" value="男" checked>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input name="sex" type="radio" value="女">女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font> 
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
					
					<br>
					
				</div>
				<div id="part3">
					<input type="button" class="layui-btn" value="注&nbsp;&nbsp;&nbsp;册" onclick="reg()">
				</div>
		</div>
	</div>


	<script src="layui.js" charset="utf-8"></script>
	<script>
		layui.use('element', function() {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

			//监听导航点击
			element.on('nav(demo)', function(elem) {
				//console.log(elem)
				layer.msg(elem.text());
			});
		});

		layui.use([ 'carousel', 'form' ],
				function() {
					var carousel = layui.carousel, form = layui.form;

					//常规轮播
					carousel.render({
						elem : '#test1',
						arrow : 'always'
					});

					//改变下时间间隔、动画类型、高度
					carousel.render({
						elem : '#test2',
						interval : 1800,
						anim : 'fade',
						height : '120px'
					});

					//设定各种参数
					var ins3 = carousel.render({
						elem : '#test3'
					});
					//图片轮播
					carousel.render({
						elem : '#test10',
						width : '100%',
						height : '500px',
						interval : 5000
					});

					//事件
					carousel.on('change(test4)', function(res) {
						console.log(res)
					});

					var $ = layui.$, active = {
						set : function(othis) {
							var THIS = 'layui-bg-normal', key = othis
									.data('key'), options = {};

							othis.css('background-color', '#5FB878').siblings()
									.removeAttr('style');
							options[key] = othis.data('value');
							ins3.reload(options);
						}
					};

					//监听开关
					form.on('switch(autoplay)', function() {
						ins3.reload({
							autoplay : this.checked
						});
					});

					$('.demoSet').on('keyup', function() {
						var value = this.value, options = {};
						if (!/^\d+$/.test(value))
							return;

						options[this.name] = value;
						ins3.reload(options);
					});

					//其它示例
					$('.demoTest .layui-btn').on('click', function() {
						var othis = $(this), type = othis.data('type');
						active[type] ? active[type].call(this, othis) : '';
					});
				});
		//页码
		layui.use([ 'laypage', 'layer' ], function() {
			var laypage = layui.laypage, layer = layui.layer;
			laypage.render({
				elem : 'demo1',
				count : 70 //数据总数
				,
				jump : function(obj) {
					console.log(obj)
				}
			});
			laypage.render({
				elem : 'demo2',
				count : 70 //数据总数
				,
				jump : function(obj) {
					console.log(obj)
				}
			});
		});
		//全选
		document.getElementById("check").onclick = function() {
			var checked = document.getElementById("check").checked;
			var checkson = document.getElementsByName("oid");
			if (checked) {
				for (var i = 0; i < checkson.length; i++) {
					checkson[i].checked = true;
				}
			} else {
				for (var i = 0; i < checkson.length; i++) {
					checkson[i].checked = false;
				}
			}
		}

		layui.use('element', function() {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

			//监听导航点击
			element.on('nav(demo)', function(elem) {
				//console.log(elem)
				layer.msg(elem.text());
			});
		});

		layui.use('form', function() {
			var form = layui.form;

			//监听提交
			form.on('submit(formDemo)', function(data) {
				layer.msg(JSON.stringify(data.field));
				return false;
			});
		});
	</script>


</body>
</html>
